// 引入Count的UI组件
import CountUI from '../../component/Count'
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

/*
  1.mapStateToProps 函数返回的是一个对象
  2.mapStateToProps 函数的返回对象中的key作为传递给UI组件props的key，value就作为传递给UI组件的props的value
  3.mapStateToProps 用于传递状态
*/
const mapStateToProps = (state) => {
  return { count: state }
}

// b函数的返回对象中的key作为传递给UI组件props的key，value就作为传递给UI组件的props的value----操作状态的方法
/*
  1.mapDispatchToProps 函数返回的是一个对象
  2.mapDispatchToProps 函数的返回对象中的key作为传递给UI组件props的key，value就作为传递给UI组件的props的value
  3.mapDispatchToProps 用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch) {
  return {
    jia: number => dispatch(createIncrementAction(number)), // 通知redux执行加法
    jian: number => dispatch(createDecrementAction(number)),
    jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time))
  }
}

// 使用connect创建并暴露一个容器组件
// connect第一次调用必须传两个参数
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

